<template>
    <div class="order">
        <el-container>
            <el-aside class="order-left" style="width: 24rem">
                <el-main class="order-left-top cashier-border">
                    <div class="staff-header" style="">
                        <img src="https://cy.keguanjia.cn/static/common/images/avatar.png" alt=""
                             class="news-face" style="height: 60px;height: 60px;float: left;border-radius: 50%;"/>
                        <div class="float-left staff-phone">
                            <div class="float-left staff-nick-name">{{ user.name }}</div>
                            <div>{{ user.phonenum }}</div>
                            <div class="temp-table" v-if="Object.keys(selectTableId).length != 0">
                                <span class="icon icon-table"></span>
                                <span style="font-weight: bold">{{selectTableId.tablesId}}</span>
                            </div>
                        </div>
                        <el-button type="warning" class="float-right staff-logout">注销</el-button>
                    </div>
                    <el-divider class="hr"></el-divider>
                    <div class="staff-info">
                        <el-row :gutter="8" class="staff-post">
                            <el-col :span="6"><div>工号 :</div></el-col>
                            <el-col :span="6"><div class="float-left">{{ user.id }}</div></el-col>

                            <el-col :span="6"><div >职级 :</div></el-col>
                            <el-col :span="6"><div class="float-left">{{ user.rank }}</div></el-col>
                        </el-row>

                        <el-row :gutter="8" class="staff-name">
                            <el-col :span="6"><div>姓名 :</div></el-col>
                            <el-col :span="6"><div class="float-left">{{ user.name }}</div></el-col>
                            <el-col :span="6"><div>性别 :</div></el-col>
                            <el-col :span="6"><div class="float-left">{{ user.sex }}</div></el-col>
                        </el-row>
                    </div>
                </el-main>
                <el-main class="order-left-bottom cashier-border">
                    <div class="meal-tabs">
                        <nav v-for="(item,index) in tabs" :key="item.id" :class="{'tab-active':num===index}" @click="setTab(index)" class="">
                            {{ item }}
                        </nav>
                    </div>
                    <div v-show="num === 0">
                        <div class="meal-left-content">
                            <table  border="0" cellpadding="0" cellspacing="0" class="meal-table">
                                <thead>
                                <tr>
                                    <th class="border-down" style="width: 35%;">菜品名称</th>
                                    <th class="border-down">单价</th>
                                    <th class="border-down">份/重</th>
                                </tr>
                                </thead>
                                <tbody  v-if="meals.length > 0">
                                <tr v-for="(food,index) in meals"  v-on:click="addMealTrClass(index)"  v-bind:class="{focusTr:index == mealFocusTrIndex}">
                                    <td>{{ food.name }}</td>
                                    <td>{{ food.price.toFixed(2) }}</td>
                                    <td><i class="fa fa-minus-circle fa-lg min-count" @click="minusCount(index)"></i>{{ food.count }}<i class="fa fa-plus-circle fa-lg max-count" @click="plusCount(index)"></i></td>
                                </tr>
                                </tbody>
                                <tbody  v-else>
                                <tr>
                                    <td colspan="3" class="empty-msg">点单区</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="meal-footer">
                            <div class="meal-total">
                                <el-button size="mini" class="float-left" @click="clearMeals">清空列表</el-button>
                                <span class="red float-right">小计{{ totalPrice }}</span>
                            </div>
                            <div class="meal-operation">
                                <el-button type="primary" class="btn-meal float-left" @click="tableOp" :disabled="meals.length===0">下单</el-button>
                                <el-dialog title="选择就餐餐桌" :visible.sync="tableChoice" class="diningChoice">
                                    <div>
                                        <div style="width: 200px;margin: 0 auto">
                                            <el-form>
                                                <el-form-item label="餐桌选择" :label-width="formLabelWidth">
                                                    <el-select v-model="selectCate" placeholder="请选择餐桌" @change="cateTables">
                                                        <el-option
                                                                v-for="item in tableTypes"
                                                                :key="item.id"
                                                                :label="item.name"
                                                                :value="item.id"
                                                        >
                                                        </el-option>
                                                    </el-select>
                                                </el-form-item>
                                            </el-form>
                                        </div>

                                        <div class="tables-appear"  v-if="selectTables.length != 0">
                                            <div class="col" v-for="item in selectTables">
                                                <el-button  @click="changeTable(item.tableNum)" :disabled="item.state != '空桌'">{{item.name}}</el-button>
                                            </div>
                                        </div>
                                        <div class="tables-appear" v-if="selectTables.length == 0">
                                            <img src="../../assets/imgs/ia_100001880.png"/>
                                            <div class="tables-empty">暂无餐桌</div>
                                        </div>
                                    </div>
                                </el-dialog>
                                <el-dialog
                                        title=""
                                        :visible.sync="paymentChoice"
                                        width="30%"
                                        :before-close="handleClose"
                                        center>
                                    <div class="succeed-meal-msg">
                                        <img src="../../assets/imgs/takeMeal.png" alt="">
                                        <span>下单成功</span>
                                    </div>
                                    <span slot="footer" class="dialog-footer">
                                        <el-button @click="afterPay">餐后付款</el-button>
                                        <el-button type="primary" @click="payAccomplishM">现在付款</el-button>
                                    </span>
                                </el-dialog>
                                <el-dialog
                                        title="结算"
                                        :visible.sync="payAccomplish"
                                        width="30%"
                                        :before-close="payClose">
                                    <div class="close-account">
                                        <div class="payMethod">
                                            <div class="payMethod-item" @click="payMethod = '扫码'" :class="{'pay-choice':payMethod == '扫码'}">
                                                <div class="pay-mask"><span></span></div>
                                                <i class="method-1"></i>
                                                扫码
                                            </div>
                                            <div class="payMethod-item" @click="payMethod = '现金'" :class="{'pay-choice':payMethod == '现金'}">
                                                <div class="pay-mask"><span></span></div>
                                                <i class="method-2"></i>
                                                现金
                                            </div>
                                            <div class="payMethod-item" @click="payMethod = 'POS'" :class="{'pay-choice':payMethod == 'POS'}">
                                                <div class="pay-mask"><span></span></div>
                                                <i class="method-3"></i>
                                                POS
                                            </div>
                                        </div>
                                        <div class="close-order-info">
                                            <div class="order-op">
                                                <el-button type="warning" plain style="width: 6rem;height: 2.7rem;font-size: 17px;" @click="addFreeTakeout">免单</el-button>
                                                <el-button type="success" style="width: 6rem;height: 2.7rem;font-size: 17px;" disabled>挂单</el-button>
                                            </div>
                                            <el-switch
                                                    v-model="isDiscount"
                                                    active-text="折扣"
                                                    inactive-text="无折扣" style="float:left;margin: 0px 12px 8px;" @change="changeDiscount">
                                            </el-switch>
                                            <div v-show="isDiscount" class="float-left" style="margin:0px 12px 8px;">
                                                <el-input-number v-model="discount" controls-position="right" @change="changeDiscount" :min="5" :precision="1" :step="0.1" :max="9.9" class="discount"></el-input-number>
                                                <span>折</span>
                                            </div>
                                            <div class="float-left">
                                                <el-form :label-position="labelPosition" label-width="80px" :model="orderPrice">
                                                    <el-form-item label="应收金额">
                                                        <el-input v-model.number="orderPrice.receivables" disabled></el-input>
                                                    </el-form-item>
                                                    <el-form-item label="实收金额">
                                                        <el-input v-model.number="orderPrice.actualPay" @focus="focusInput = 0"></el-input>
                                                    </el-form-item>
                                                    <el-form-item label="备注">
                                                        <el-input v-model="orderPrice.remark" @focus="focusInput = 1"></el-input>
                                                    </el-form-item>
                                                </el-form>
                                            </div>
                                        </div>
                                        <div class="numOperation">
                                            <span @click="addPayValue(1)">1</span><span @click="addPayValue(2)">2</span><span @click="addPayValue(3)">3</span>
                                            <span @click="addPayValue(4)">4</span><span @click="addPayValue(5)">5</span><span @click="addPayValue(6)">6</span>
                                            <span @click="addPayValue(7)">7</span><span @click="addPayValue(8)">8</span><span @click="addPayValue(9)">9</span>
                                            <span @click="addPayValue('.')">.</span><span @click="addPayValue(0)">0</span><span @click="delPayValue"><i></i></span>
                                        </div>
                                    </div>
                                    <span slot="footer" class="dialog-footer" style="margin-top: -3rem;">
                                        <el-button type="primary" @click="addTakeout" style="width: 12.5rem;height: 3rem;font-size: 18px;">支 付 订 单</el-button>
                                    </span>
                                </el-dialog>
                                <el-dialog
                                        title="结算"
                                        :visible.sync="payAccomplish"
                                        width="30%"
                                        :before-close="payClose">
                                    <div class="close-account">
                                        <div class="payMethod">
                                            <div class="payMethod-item" @click="payMethod = '扫码'" :class="{'pay-choice':payMethod == '扫码'}">
                                                <div class="pay-mask"><span></span></div>
                                                <i class="method-1"></i>
                                                扫码
                                            </div>
                                            <div class="payMethod-item" @click="payMethod = '现金'" :class="{'pay-choice':payMethod == '现金'}">
                                                <div class="pay-mask"><span></span></div>
                                                <i class="method-2"></i>
                                                现金
                                            </div>
                                            <div class="payMethod-item" @click="payMethod = 'POS'" :class="{'pay-choice':payMethod == 'POS'}">
                                                <div class="pay-mask"><span></span></div>
                                                <i class="method-3"></i>
                                                POS
                                            </div>
                                        </div>
                                        <div class="close-order-info">
                                            <div class="order-op">
                                                <el-button type="warning" plain style="width: 6rem;height: 2.7rem;font-size: 17px;" @click="freePay">免单</el-button>
                                                <el-button type="success" disabled style="width: 6rem;height: 2.7rem;font-size: 17px;">挂单</el-button>
                                            </div>
                                            <el-switch
                                                    v-model="isDiscount"
                                                    active-text="折扣"
                                                    inactive-text="无折扣" style="float:left;margin: 0px 12px 8px;" @change="changeDiscount">
                                            </el-switch>
                                            <div v-show="isDiscount" class="float-left" style="margin:0px 12px 8px;">
                                                <el-input-number v-model="discount" controls-position="right" @change="changeDiscount" :min="5" :precision="1" :step="0.1" :max="9.9" class="discount"></el-input-number>
                                                <span>折</span>
                                            </div>
                                            <div class="float-left">
                                                <el-form :label-position="labelPosition" label-width="80px" :model="orderPrice">
                                                    <el-form-item label="应收金额">
                                                        <el-input v-model.number="orderPrice.receivables" disabled></el-input>
                                                    </el-form-item>
                                                    <el-form-item label="实收金额">
                                                        <el-input v-model.number="orderPrice.actualPay" @focus="focusInput = 0"></el-input>
                                                    </el-form-item>
                                                    <el-form-item label="备注">
                                                        <el-input v-model="orderPrice.remark" @focus="focusInput = 1"></el-input>
                                                    </el-form-item>
                                                </el-form>
                                            </div>
                                        </div>
                                        <div class="numOperation">
                                            <span @click="addPayValue(1)">1</span><span @click="addPayValue(2)">2</span><span @click="addPayValue(3)">3</span>
                                            <span @click="addPayValue(4)">4</span><span @click="addPayValue(5)">5</span><span @click="addPayValue(6)">6</span>
                                            <span @click="addPayValue(7)">7</span><span @click="addPayValue(8)">8</span><span @click="addPayValue(9)">9</span>
                                            <span @click="addPayValue('.')">.</span><span @click="addPayValue(0)">0</span><span @click="delPayValue"><i></i></span>
                                        </div>
                                    </div>
                                    <span slot="footer" class="dialog-footer" style="margin-top: -3rem;">
                                        <el-button type="primary" @click="nowPay" style="width: 12.5rem;height: 3rem;font-size: 18px;">支 付 订 单</el-button>
                                    </span>
                                </el-dialog>
                                <el-button type="primary" class="btn-meal float-right" @click="closeAccountM" :disabled="meals.length===0">结算</el-button>
                                <el-dialog
                                        title="结算"
                                        :visible.sync="closeAccount"
                                        width="30%"
                                        :before-close="payClose">
                                    <div class="close-account">
                                        <div class="payMethod">
                                            <div class="payMethod-item" @click="payMethod = '扫码'" :class="{'pay-choice':payMethod == '扫码'}">
                                                <div class="pay-mask"><span></span></div>
                                                <i class="method-1"></i>
                                                扫码
                                            </div>
                                            <div class="payMethod-item" @click="payMethod = '现金'" :class="{'pay-choice':payMethod == '现金'}">
                                                <div class="pay-mask"><span></span></div>
                                                <i class="method-2"></i>
                                                现金
                                            </div>
                                            <div class="payMethod-item" @click="payMethod = 'POS'" :class="{'pay-choice':payMethod == 'POS'}">
                                                <div class="pay-mask"><span></span></div>
                                                <i class="method-3"></i>
                                                POS
                                            </div>
                                        </div>
                                        <div class="close-order-info">
                                            <div class="order-op">
                                                <el-button type="warning" plain style="width: 6rem;height: 2.7rem;font-size: 17px;" @click="addFreeTakeout">免单</el-button>
                                                <el-button type="success" style="width: 6rem;height: 2.7rem;font-size: 17px;">挂单</el-button>
                                            </div>
                                            <el-switch
                                                    v-model="isDiscount"
                                                    active-text="折扣"
                                                    inactive-text="无折扣" style="float:left;margin: 0px 12px 8px;" @change="changeDiscount">
                                            </el-switch>
                                            <div v-show="isDiscount" class="float-left" style="margin:0px 12px 8px;">
                                                <el-input-number v-model="discount" controls-position="right" @change="changeDiscount" :min="5" :precision="1" :step="0.1" :max="9.9" class="discount"></el-input-number>
                                                <span>折</span>
                                            </div>
                                            <div class="float-left">
                                                <el-form :label-position="labelPosition" label-width="80px" :model="orderPrice">
                                                    <el-form-item label="应收金额">
                                                        <el-input v-model.number="orderPrice.receivables" disabled></el-input>
                                                    </el-form-item>
                                                    <el-form-item label="实收金额">
                                                        <el-input v-model.number="orderPrice.actualPay" @focus="focusInput = 0"></el-input>
                                                    </el-form-item>
                                                    <el-form-item label="备注">
                                                        <el-input v-model="orderPrice.remark" @focus="focusInput = 1"></el-input>
                                                    </el-form-item>
                                                </el-form>
                                            </div>
                                        </div>
                                        <div class="numOperation">
                                            <span @click="addPayValue(1)">1</span><span @click="addPayValue(2)">2</span><span @click="addPayValue(3)">3</span>
                                            <span @click="addPayValue(4)">4</span><span @click="addPayValue(5)">5</span><span @click="addPayValue(6)">6</span>
                                            <span @click="addPayValue(7)">7</span><span @click="addPayValue(8)">8</span><span @click="addPayValue(9)">9</span>
                                            <span @click="addPayValue('.')">.</span><span @click="addPayValue(0)">0</span><span @click="delPayValue"><i></i></span>
                                        </div>
                                    </div>
                                    <span slot="footer" class="dialog-footer" style="margin-top: -3rem;">
                                        <el-button type="primary" @click="nowPay" style="width: 12.5rem;height: 3rem;font-size: 18px;">支 付 订 单</el-button>
                                    </span>
                                </el-dialog>
                            </div>
                        </div>
                    </div>
                    <div v-show="num === 1">
                        <div class="meal-right-content">
                            <table border="0" cellpadding="0" cellspacing="0" class="meal-table">
                                <thead>
                                <tr>
                                    <th class="border-down">顾客</th>
                                    <th class="border-down">备注</th>
                                    <th class="border-down">挂单时间</th>
                                    <th class="border-down">待付款</th>
                                </tr>
                                </thead>
<!--                                <tbody>-->
<!--                                <tr>-->
<!--                                    <td>游客</td>-->
<!--                                    <td>有事离开</td>-->
<!--                                    <td>12:03</td>-->
<!--                                    <td>167</td>-->
<!--                                </tr>-->
                                <tbody  v-if="this.$store.state.entryOrders.length > 0">
                                <tr v-for="(entry,index) in this.$store.state.entryOrders" v-on:click="addTrClass(index)"  v-bind:class="{focusTr:index == focusTrIndex}">
                                    <td>游客</td>
                                    <td>{{ entry.remark }}</td>
                                    <td>{{ timeToString(entry.entryTime) }}</td>
                                    <td><span class="i-rmb"><i class="fa fa-jpy"></i></span>{{ entry.obligation }}</td>
                                </tr>
                                </tbody>
                                <tbody  v-else>
                                <tr>
                                    <td colspan="4" class="empty-msg">挂单区</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </el-main>
            </el-aside>
            <el-main class="order-content cashier-border empty-padding">
                <div class="meal-searchs">
                    <el-input
                            placeholder="输入菜品名称查找"
                            v-model="input1" class="meal-search float-left">
                        <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    </el-input>
<!--                    <i class="fa fa-barcode"></i>-->
                    <el-input
                            placeholder="扫码输入菜品编码查找"
                            prefix-icon="fa fa-barcode"
                            v-model="input2" :class="{'meal-search':true}">
<!--                        :class="{'meal-test':true}"-->
                    </el-input>
                </div>
                <el-divider class="hr"></el-divider>
                <template>
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="全部" name="first" class="meal-food-centent">
                            <div class="meal-food" v-for="food in this.$store.state.foodCount" @click="addMeals(food.id)">
<!--                                url: food.picPath.indexOf('/') === -1 ? '' : food.picPath-->
                                <span class="meal-img" :style="{'background-image':'url(http://localhost:8080'+food.picPath+')'}"></span>
                                <span class="meal-name">{{ food.name }}</span>
                                <span class="meal-stock-title">库存:</span>
                                    <span class="meal-stock" v-if="food.inventoryCount > 999">无限</span>
                                    <span class="meal-stock" v-else>{{ food.inventoryCount }}</span>
                                <span class="meal-price-item">
<!--                                    ${parseFloat(food.price)%1.0 === 0 ? food.price+'.00': parseFloat(food.price)}-->
                                    <span class="i-rmb"><i class="fa fa-jpy"></i></span>
                                    <span class="meal-price">{{ parseFloat(food.price).toFixed(2) }}</span>
                                </span>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane v-for="category in categorys" :id="category.id" :label="category.name" :name="category.name" class="meal-food-centent">
                            <div class="meal-food" v-for="food in cateFoods"  @click="addMeals(food.id)">
                                <span class="meal-img" :style="{'background-image':'url(http://localhost:8080'+food.picPath+')'}"></span>
                                <span class="meal-name">{{ food.name }}</span>
                                <span class="meal-stock-title">库存:</span>
                                <span class="meal-stock" v-if="food.inventoryCount > 999">无限</span>
                                <span class="meal-stock" v-else>{{ food.inventoryCount }}</span>
                                <span class="meal-price-item">
                                    <span class="i-rmb"><i class="fa fa-jpy"></i></span>
                                    <span class="meal-price">{{ parseFloat(food.price).toFixed(2) }}</span>
                                </span>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </template>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    import moment from "moment"
    export default {
        data() {
            return {
                selectTableId:{},
                activeName: 'first',
                mealContents: [],
                input1: '',
                input2: '',
                tabs: ['点单区','挂单区'],
                num: 0,
                categorys: [],
                cateFoods: [],
                tableTypes: [],
                selectCate: 2,
                selectTables: [],
                tableChoice: false,
                tableNum: -1,
                paymentChoice: false,
                payAccomplish: false,
                closeAccount: false,
                payMethod : '扫码',
                isDiscount: false,
                discount: 9.0,
                labelPosition: 'right',
                focusInput: -1,
                orderPrice:{
                    receivables: '',
                    actualPay: '',
                    remark: ''
                },
                formLabelWidth: '80px',
                focusTrIndex: -1,
                mealFocusTrIndex: -1,
            };
        },
        methods: {
            handleClick(tab, event) {
                // console.log(tab, event);
                this.categoryFoods(tab.$attrs.id)
            },
            setTab(index) {
                this.num = index;
                this.$store.state.seekTab = this.num;
            },
            handleClose(done){
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            payClose(done){
                this.$confirm('确认取消支付？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            closeAccountM(){
                this.closeAccount = true;
                this.focusInput = -1;
                this.orderPrice.receivables = this.totalPrice.toFixed(2);
                this.orderPrice.actualPay = '';
                this.orderPrice.remark = '';
            },
            payAccomplishM(){
                this.paymentChoice = false
                this.payAccomplish = true;
                this.focusInput = -1;
                this.orderPrice.receivables = this.totalPrice.toFixed(2);
                this.orderPrice.actualPay = '';
                this.orderPrice.remark = '';
            },
            changeDiscount(){
                if(this.isDiscount){
                    this.orderPrice.receivables = (this.totalPrice * (this.discount * 0.1)).toFixed(2)
                }else{
                    this.orderPrice.receivables = this.totalPrice.toFixed(2);
                }
            },
            afterPay(){
                if(this.tableNum != null){
                    this.paymentChoice = false;
                    let orderFoods = [];
                    this.meals.forEach(meal => {
                        orderFoods.push({
                            foodId: meal.id,
                            count: meal.count
                        })
                    })
                    this.$axios.post("/ec/addA",{
                        "tablesId": this.tableNum,
                        "staffId": sessionStorage.getItem('user').id,
                        "price": this.totalPrice,
                        "orderFoods": orderFoods
                    }).then(response => {
                        if(response.data){
                            this.clearMeals()
                            this.payAccomplish = false;
                            this.paySucceedMsg()
                        }
                    })
                }
                this.tableNum = -1;
            },
            freePay(){
                if(this.tableNum != null){
                    this.payAccomplish = false;
                    let orderFoods = [];
                    this.meals.forEach(meal => {
                        orderFoods.push({
                            foodId: meal.id,
                            count: meal.count
                        })
                    })
                    this.$axios.post("/ec/addF",{
                        "tablesId": this.tableNum,
                        "staffId": sessionStorage.getItem('user').id,
                        "price": this.totalPrice,
                        "orderFoods": orderFoods
                    }).then(response => {
                        if(response.data){
                            this.clearMeals()
                            this.payAccomplish = false;
                            this.paySucceedMsg()
                        }
                    })
                }
                this.tableNum = -1;
            },
            nowPay(){
                if(this.tableNum != null){
                    let orderFoods = [];
                    this.meals.forEach(meal => {
                        orderFoods.push({
                            foodId: meal.id,
                            count: meal.count
                        })
                    })
                    this.$axios.post("/ec/addN",{
                        "tablesId": this.tableNum,
                        "staffId": sessionStorage.getItem('user').id,
                        "price": this.totalPrice,
                        "actualPrice": this.orderPrice.actualPay,
                        "orderFoods": orderFoods
                    }).then(response => {
                        if(response.data){
                            this.clearMeals()
                            this.payAccomplish = false;
                            this.paySucceedMsg()
                        }
                    })
                }
                this.tableNum = -1;
            },
            addFreeTakeout(){
                this.orderPrice.actualPay = 0;
                this.addTakeout();
            },
            addTakeout(){
                let that = this;
                let takeoutFoods = [];
                this.meals.forEach(meal => {
                    let takeoutFood = {
                        foodId: meal.id,
                        count: meal.count
                    }
                    takeoutFoods.push(takeoutFood);
                })
                this.$axios.post("take/add",{
                    "totalPrice": parseInt(this.orderPrice.actualPay),
                    "state": '待取餐',
                    "remark": this.orderPrice.remark,
                    "takeoutFoods": takeoutFoods
                }).then( response => {
                    if(response.data){
                        this.closeAccount = false;
                        that.clearMeals();
                        that.paySucceedMsg();
                        // console.log(this.closeAccount)
                    }
                })
            },
            paySucceedMsg(){
                this.$notify({
                    title: '支付成功',
                    message: '交易成功，订单移交后厨处理~',
                    type: 'success'
                });
            },
            addPayValue(value){
                if(this.focusInput === 0){
                    this.orderPrice.actualPay += value
                }else if(this.focusInput === 1){
                    this.orderPrice.remark += value;
                }
            },
            delPayValue(){
                if(this.focusInput === 0){
                    this.orderPrice.actualPay = this.orderPrice.actualPay.substr(0,this.orderPrice.actualPay.length - 1)
                }else if(this.focusInput === 1){
                    this.orderPrice.remark = this.orderPrice.remark.substring(0,this.orderPrice.remark.length - 1)
                }
            },
            loadCate(){
                this.$axios.get('/gory/list').then(req => {
                    req.data.forEach(category => {
                        this.categorys.push(category);
                    })
                })
            },
            categoryFoods: function (categoryId) {
                let formData = new FormData();
                formData.append('categoryId',categoryId);
                this.$axios.post('/food/gory',this.qs.stringify({categoryId:categoryId}))//this.qs.stringify({'categoryId':categoryId})
                    .then(req => {
                        this.cateFoods.length = 0;
                        if(req.data){
                            req.data.forEach(food => {
                                this.cateFoods.push(food);
                            })
                        }
                    })
                // console.log(_this.cateFoods)
            },
            addTrClass: function (index) {
                this.focusTrIndex = index;
                this.$store.state.focusTrIndex = this.focusTrIndex;
                // console.log(this.$store.state.focusTr);
            },
            addMealTrClass(index){
                this.mealFocusTrIndex = index;
                this.$store.state.mealFocusTrIndex = index;
            },
            tableOp(){
                //判断一下是加菜还是新下单
                if(Object.keys(this.selectTableId).length == 0){
                    this.tableChoice = true
                    this.$axios.post('/diningTable/zwlx')
                        .then(response => {
                            console.log(response);
                            this.tableTypes = response.data;
                        })
                    this.cateTables();
                }else{
                    alert("加菜")
                }
            },
            cateTables(){
                let _this = this;
                this.$axios.post('diningTable/table/'+this.selectCate)
                    .then( response => {
                        console.log(response);
                        _this.selectTables = response.data;
                    })
            },
            changeTable(num){
                this.paymentChoice = true;
                this.tableChoice = false
                this.tableNum = num;
                console.log(this.tableNum)
            },
            dateToString(date){
                return moment(date).format("YYYY-MM-DD")
            },
            timeToString(time){
                return moment(time).format("HH:mm:ss")
            },
            addMeals(foodId){
                this.$store.commit("addMeals",foodId);
            },
            minusCount(index){
                this.$store.commit("minusCount",index)
            },
            plusCount(index){
                this.$store.commit("plusCount",index)
            },
            clearMeals(){
                this.$store.commit("clearMeals");
            },
            toPath(path){
                return path.replace(/\\/g,"/");
            },
            createCons(){

            }
        },
        computed: {
            meals(){
                return this.$store.getters.mealContents;
            },
            totalPrice(){
                return this.$store.getters.totalPrice;
            },
            user(){
                return JSON.parse(sessionStorage.getItem("user"));
            },

        },
        created:function () {
            console.log(sessionStorage.getItem('user'))
            console.log(this.user.sex);
            this.selectTableId = this.$store.state.selectTableId;
            if(Object.keys(this.selectTableId).length != 0){
                let _this = this;
                this.selectTableId.orderFoods.forEach(o=>{
                    _this.$store.commit("addMeals",o.foods.id);
                });
            }
            this.loadCate();
            this.$store.commit("flushFoods")
            this.$store.commit("flushEntry")
        }
    };
</script>

<style scoped>
    @import "../../css/PublicCashier.css";
    @import "../../css/Order.css";
</style>
